---
title: useCSSVariables
description: The useCSSVariables hook can be used to dynamically set CSS Variables (custom properties) on the root html or other elements.
docType: API Docs
docGroup: Hooks
group: Theming
hooks: [useCSSVariables]
---

# useCSSVariables [$SOURCE](packages/core/src/theme/useCSSVariables.ts)

```ts disableTransform
function useCSSVariables<Name extends CSSVariableName>(
  variables: ReadonlyCSSVariableList<Name>,
  rootNode?: RefObject<HTMLElement> | HTMLElement
): CSSVariablesProperties<Name> | undefined;
```

The `useCSSVariables` hook can be used to dynamically set CSS Variables (custom
properties) on the root `<html>` or other elements.

## Example Usage

```tsx
import { purple500 } from "@react-md/core/theme/colors";
import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
import { contrastColor } from "@react-md/core/theme/utils";
import { useMemo } from "react";

function Example() {
  // Note: You should use `useMemo` so that the custom variables are not
  // added and removed during each render.
  useCSSVariables(
    useMemo(() => {
      return [
        {
          name: "--rmd-primary-color",
          value: purple500,
        },
        {
          name: "--rmd-on-primary-color",
          value: contrastColor(purple500),
        },
      ];
    }, [])
  );

  return null;
}
```

## Parameters

- `variables` - A list of `{ name: string; value: string | number; }` to
  define. The hook will do nothing if this is an empty list.
- `rootNode` - One of:
  - `undefined | false` - Applies the custom properties to the root
    `document.documentElement`
  - `RefObject<HTMLElement> | HTMLElement` - Applies the custom properties to that element

## Returns

Nothing.
